<template>
  <div ref="containerRef" class="h-full w-full">
    
    <div class="w-full aspect-video">
      <el-amap ref="mapRef" :center="mapState.center" :zoom="mapState.zoom" view-mode="3D" @init="onInit">
        <el-amap-layer-image v-if="image" :url="image" :bounds="mapState.bounds" :opacity="1" :zIndex="100" />
        <el-amap-rectangle v-if="image" ref="rectangleRef" v-model:bounds="mapState.path" @dragging="ondragging"
          :editable="true" :draggable="true" fillColor="transparent" :fill-opacity="0.1" :zIndex="110" />
      </el-amap>
    </div>
    <div class="mt-3 flex justify-end">
      <el-button type="primary" @click="confirm">确认</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
/*使用方法*/
//  bounds = [104.044794 ,30.644344,104.050713, 30.648466]
// <MapImage :center="[104.0480011, 30.646202]" v-model:bounds="bounds"/>
import { onBeforeMount, reactive, ref, watch } from "vue";
import { ElAmap, ElAmapLayerImage, ElAmapRectangle } from "@vuemap/vue-amap";
import { useDark } from "@/views/welcome/utils";
const { isDark } = useDark();
const props = defineProps({
  center: {
    type: Array,
    default: () => []
  },
  image: {
    type: String,
    default: ""
  },
  bounds: {
    type: Array, //[104.044794 ,30.644344,104.050713, 30.648466]
    default: () => []
  },
})
const emits = defineEmits(["update:bounds","confirm"])
console.log("传递的参数", props);
const mapState = reactive({
  zoom: 15,
  center: [],
  bounds: [],
  // path: [[104.044794 ,30.644344], [104.050713, 30.648466]]
  path: []
})

const rectangleRef = ref()
const mapRef = ref()

onBeforeMount(() => {
  mapState.center = props.center.map(Number)
  mapState.bounds = props.bounds
 
})

const onInit = (e) => {
  
  e.setMapStyle(isDark.value ? 'amap://styles/darkblue' : 'amap://styles/normal')
  initBounds()
}

watch(() => mapState.path, (val) => {
  mapState.bounds = [val[0][0], val[0][1], val[1][0], val[1][1]]
})

// 简单实现绘制正方形，side 正方形边长，单位米
// 若需要绘制其他矩形，需自行修改代码
function initBounds(side = 1000) {
  if(props.bounds.length === 4) {
    mapState.path = [[props.bounds[0], props.bounds[1]], [props.bounds[2], props.bounds[3]]]

    return
  }
  let lat = Number(mapState.center[1])
  let lng = Number(mapState.center[0])
  const centerPoint = new AMap.LngLat(lng, lat);

  const upRightPoint = centerPoint.offset(side / 2, side / 2);
  const leftBottomPoint = centerPoint.offset(-side / 2, -side / 2);

  mapState.path = [[leftBottomPoint.lng, leftBottomPoint.lat], [upRightPoint.lng, upRightPoint.lat]]

}

const ondragging = (e) => {
  const opt = rectangleRef.value.$$getInstance().getBounds()
  mapState.bounds = [opt.southWest.lng, opt.southWest.lat, opt.northEast.lng, opt.northEast.lat]
}

const confirm = () => {
  emits("update:bounds", mapState.bounds)
  emits("confirm",mapState.bounds)
}
</script>

<style   lang="scss">
 .amap-marker-label  {
    position: absolute;
    z-index: 2;
    border: 1px solid rgb(225, 225, 225,0.8) !important;
     background-color: rgba(225,225,225,0.8);
    white-space: nowrap;
    cursor: default;
    padding: 3px;
    font-size: 12px;
    line-height: 14px;
}
</style>
